<template>
	<view class="order-page">
		<view class="title">订单</view>
		<view class="main">
			<view class="tab">
				<u-tabs style="width: 100%;" lineWidth="0" :list="tabList" :activeStyle="{
        color: textColor,
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :inactiveStyle="{
        color: textColor,
        transform: 'scale(1)'
    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="changeTab"></u-tabs>
			</view>
			<!-- 	<view class="search">
				<view class="search-box">
					<u-search placeholder="请输入饰品关键字" @search="search" shape="square" :showAction="false"
						v-model="searchText"></u-search>
				</view>
			</view> -->
			<view class="order-list-box">
				<u-empty v-if="orderList.length<1" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<u-swipe-action v-else>
					<u-swipe-action-item @click="orderItem(item,index)" :options="options1"
						v-for="(item,index) in formattedTimes" :key="index">
						<view class="order-item">
							<view class="order-item-box">
								<view class="time-status">
									<view class="time">
										订单号：{{item.order_num}}
									</view>
									<view class="status">
										{{item.formattedTime}}
									</view>
								</view>
								<view class="jewelry-msg">
									<view class="image-box">
										<view class="img"
											:style="{ backgroundImage: 'url(' + item.jewelry_history.itemIcon + ')' }">
										</view>
									</view>
									<view class="msg-box">
										<view class="name">
											{{item.jewelry_history.itemName}}
										</view>
										<view class="order-num">
											<view class="left">
												发货方式：
											</view>
											<view class="right">
												<view class="status" v-if="item.delivery==1">
													人工发货
												</view>
												<view class="status" v-if="item.delivery==2">
													自动发货
												</view>
											</view>
										</view>
										<view class="order-num">
											<view class="left">
												支付状态：
											</view>
											<view class="right">
												<view class="status" style="color: red;" v-if="item.pay_status==0">
													未支付
												</view>
												<view class="status" style="color: green;" v-if="item.pay_status==1">
													已支付
												</view>
											</view>
										</view>
										<view class="order-num">
											<view class="left">
												steam：
											</view>
											<view class="right" v-if="item.user_history">
												{{item.user_history[0].link}}
											</view>
										</view>
										<view class="price">
											￥{{item.jewelry_history.consultPrice}}
										</view>
										<view class="statusBox">
											<u-tooltip text="" overlay @click="tooltip"></u-tooltip>
											<view class="status" v-if="item.shipment_status==0">
												待支付
											</view>
											<view class="status" v-if="item.shipment_status==1">
												待发货
											</view>
											<view class="status" v-if="item.shipment_status==2">
												发货中
											</view>
											<view class="status" v-if="item.shipment_status==3">
												交易完成
											</view>
											<view class="status" v-if="item.shipment_status==4">
												取消订单
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		<tabbar current="2"></tabbar>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import tabbar from '../../components/tabbar.vue';
	export default {
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C',
					}
				}],
				searchText: "",
				tabList: [{
					name: '全部',
				}, {
					name: '待支付'
				}, {
					name: '待发货'
				}, {
					name: '发货中'
				}, {
					name: '交易完成'
				}, {
					name: "取消订单"
				}],
				orderList: [],
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			tabbar
		},
		onShow() {
			this.getList()
			this.getSetting()
		},
		computed: {
			//转换时间
			formattedTimes() {
				return this.orderList.map((item, index) => {
					const date = new Date(item.create_time * 1000)
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					const hours = date.getHours().toString().padStart(2, '0');
					const minutes = date.getMinutes().toString().padStart(2, '0');
					const seconds = date.getSeconds().toString().padStart(2, '0');
					const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
					return {
						...item,
						formattedTime
					};
				})
			},
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取数据
			getList(delivery, pay_status, shipment_status) {
				http.post('/api/order/orderList', {
					delivery: delivery,
					pay_status: pay_status,
					shipment_status: shipment_status,
					limit: 50
				}).then(res => {
					this.orderList = res.data
				}).catch(err => {})
			},
			//tab切换
			changeTab(item) {
				let count = ""
				switch (item.index) {
					case 0:
						count = ""
						break;
					case 1:
						count = 0
						break;
					case 2:
						count = 1
						break;
					case 3:
						count = 2
						break;
					case 4:
						count = 3
						break;
					case 5:
						count = 4
						break;
					default:
						break;
				}
				// console.log(count);
				this.getList("0", "", count)
			},
			//订单单击
			orderItem(item, index) {
				// console.log(item.id);
				this.DelOrder(item.id)
			},
			//删除订单
			DelOrder(orderId) {
				http.post('/api/order/delOrder', {
					order_id: orderId
				}).then(res => {
					location.reload()
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.order-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);
		color: var(--text-color);

		>.title {
			width: 95%;
			height: 80rpx;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 36rpx;
			margin: auto;
		}

		.main {
			width: 100%;
			height: calc(100% - 220rpx);
			background-color: var(--bg-color);

			.tab {
				width: 100%;
				height: 100rpx;
				background-color: var(--bg-color);
				display: flex;
				align-items: end;
			}

			// .search {
			// 	width: 100%;
			// 	height: 100rpx;
			// 	background-color: white;

			// 	.search-box {
			// 		width: 90%;
			// 		height: 100rpx;
			// 		display: flex;
			// 		align-items: center;
			// 		background-color: white;
			// 		margin: auto;
			// 	}
			// }

			.order-list-box {
				width: 100%;
				height: calc(100% - 100rpx);
				overflow-y: scroll;

				.order-item {
					width: 100%;
					height: 305rpx;
					background-color: var(--bg-color);

					.order-item-box {
						width: 95%;
						height: 100%;
						margin: auto;

						.time-status {
							width: 100%;
							height: 70rpx;
							border-top: 1px solid #dfdfdf;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.time,
							.status {
								font-size: 28rpx;
								color: #a1a1a1;
							}

						}

						.jewelry-msg {
							width: 100%;
							height: calc(100% - 70rpx);
							margin-top: 20rpx;
							display: flex;

							.image-box {
								min-width: 220rpx;
								height: 200rpx;

								background-image: radial-gradient(#969696, #4c4c4c);

								>.img {
									width: 100%;
									height: 100%;
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;
								}
							}

							.msg-box {
								width: calc(100% - 240rpx);
								height: 200rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								position: relative;

								.name {
									flex: 1;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									font-weight: bold;
									font-size: 26rpx;
								}

								.order-num {
									flex: 1;
									font-size: 24rpx;
									color: #7a7a7a;
									display: flex;
								}

								.price {
									flex: 1;
									font-weight: bold;
									color: #EEA20E;
								}

								.statusBox {
									position: absolute;
									font-size: 24rpx;
									color: #7a7a7a;
									bottom: 0;
									right: 0;
								}
							}
						}
					}
				}
			}

		}
	}
</style>